<template>
	<view>
		<van-tabs swipeable animated :z-index="z_index"  @change="onChange" v-model="active"    :title-active-color="titleColor" color="#FF7300" >
		  <van-tab title="全部"  name="danzhifu" >
			  <view v-if="list_shuju == 0" class="index_tabs">
				  <keep-alive>
					  <kaquan :list_shuju="list_shuju" :elementHeight="elementHeight"></kaquan>
				  </keep-alive>
			  </view>
		  </van-tab>
		  <van-tab title="已使用"  name="danzhifu" >
			  <view v-if="list_shuju == 1" class="index_tabs">
				  <keep-alive>
					  <kaquan :list_shuju="list_shuju" :elementHeight="elementHeight"></kaquan>
				  </keep-alive>
			  </view>
		  </van-tab>
		  <van-tab title="未使用" name="zhaunchangdan" >
			  <view v-if="list_shuju == 2" class="index_tabs">
				  <keep-alive>
				  		<kaquan :list_shuju="list_shuju" :elementHeight="elementHeight"></kaquan>			  
				  </keep-alive>
			  </view>
		  </van-tab>
		  <van-tab title="已过期" name="danzhifu">
			  <view v-if="list_shuju == 3" class="index_tabs">
				  <keep-alive>
				  		<kaquan :list_shuju="list_shuju" :elementHeight="elementHeight"></kaquan>			  
				  </keep-alive>
			  </view>
		  </van-tab>
		</van-tabs>
	</view>
</template>
<script>
	export default {
		data(){
			return{
				dad: "",
				num: 1,
				list_content: ["全部","已使用","未使用","已过期"],
				list_num: 0,
				content: "",
				youhuiquan: [],
				img: "http://img.curiousmore.com/667275",
				panduan: 1,
				triggered: false,
				list: [],
				juli: 30,
				xiala_panduan: 1,
				shi: "",
				color: "#FF5252",
				num_list: 1,
				shifu_quan: 1,
				conten: [],
				num_: 1,
				list_biao: 1,
				list_shuju: 0,
				active: 0,
				titleColor: "#FF7300",
				elementHeight: 0
			}
		},
		
		methods:{
			onChange(e){
				this.list_shuju =  e.detail.index
			}
		},
		
		onLoad() {
			
		},
		
		onShow() {
			
		},
		
		onReady() {
			uni.getSystemInfo({
				success: (res) => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.index_tabs').boundingClientRect(data => {
						let height = res.screenHeight/100
						this.elementHeight = (res.screenHeight - data.top)/height
					}).exec();
				}
			})
		}
	}
</script>
<style lang="scss" scoped>
	.clo{
		color: #C4C4C4;
		border: 0.9rpx solid #C4C4C4;
	}
	.kaike{
		color: #FF7300;
		font-size: 21.744rpx;
		font-weight: bold;
	}
	.ranse{
		color: #FF7300;
	}
</style>